<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="/static/js/jquery-1.12.4.min.js"/>

<div style="display:flex;margin-bottom:20px;">
    <input type="text" readonly placeholder="请选择图片" class="form-control col-sm-6" id="s_idcard" name="s_idcard" value="{$items['s_idcard']}">
    <input type="text" style="width: 100px;" readonly value="请选择图片" class="btn btn-default" >
    <input type="file" id="cover" name="cover" class="btn btn-default" style="width: 100px;height:35px;line-height:85px;position: absolute;right: 15px;z-index: 1;background: transparent;" />
</div>
<img id="smallCover" width=150 mode="widthFix" src="{$items['s_idcard']}">
<script>
    //单图片上传$('#cover').on('change',function(){
    var filePath = $(this)[0].files[0].name      //获取到input的value，里面是文件的路径
    var fileFormat = filePath.split('.')[1].toLowerCase()
    // 检查是否是图片
    if( !fileFormat.match(/png|jpg|jpeg/) ) {
        alert('上传错误,文件格式必须为：png/jpg/jpeg');

    }
    var formData =  new FormData();
    formData.append('upfile', $(this)[0].files[0]); //添加图片信息的参数
    $.ajax({
        url: "/upload",   //自己的路径
        type: "post",
        dataType: "json",
        cache: false,
        mimeType: "multipart/form-data",
        data: formData,
        processData: false,// 不处理数据
        contentType: false, // 不设置内容类型
        async:false,
        success:function (result){
            $('#smallCover').attr('src',result)
            $('#x_thumb').val(result)
        }

    });
</script>
</body>
</html>